<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function demo1(){
				//获得id名称是div1的对象
				var div1 = document.getElementById("div1");
				//获得css样式        只支持行内式的css
				var wi = div1.style.width;
				var hi = div1.style.height;
				
				alert(wi+"---"+hi);
				//操作元素样式
				div1.style.width="300px";
				div1.style.height="300px";
				//对于background-color格式的样式在js中需要使用驼峰规则进行改变
				div1.style.backgroundColor="blue";
				
				//通过增加class类来增加对应的css样式      注意：className
				div1.className="div3";
			}
			//获取不到
			/*function demo2(){
				//获得id名称是div1的对象
				var div1 = document.getElementById("div1");
				//获得css样式        只支持行内式的css
				var wi = div1.style.width;
				var hi = div1.style.height;
				
				alert(wi+"---"+hi)
				
			}*/
		</script>
		
		<style>
			#div2{
				width: 200px;
				height: 200px;
				background-color: gold;
			}
			.div3{
				border: 3px solid green;
			}
		</style>
	</head>
	<body>
		<div id="div1" style="width: 200px;height: 200px;background-color: red;"></div>
		<div id="div2"></div>
		<input type="button" name="" id="" value="操作样式" onclick="demo1()"/>
	</body>
</html>
